<!DOCTYPE HTML>
<html>

<head>
    <title>灵犀商城-后台管理系统</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.bootcss.com/vue/2.2.4/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
    <!-- 引入ele.css -->
    <link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
    <!-- 引入自定义公用js -->
    <script src="/js/utils.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- icon for iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="灵犀网络" />
    <link rel="apple-touch-icon-precomposed" href="org/images/iOS72x72@2x.png">
    <!-- icon for web -->
    <link rel="icon" type="image/png" href="/images/iOS72x72@2x.png">
</head>

<body>
<div id="top">
    <!-- 顶部导航 -->
    <el-menu theme="dark" default-active="1" mode="horizontal" class="mt5">
        <el-row>
            <el-col :span="4">
                <el-menu-item index="1" class="logo">灵犀商城</el-menu-item>
            </el-col>
            <el-col :span="2" :push="18">
                <a href="/manager/logout">
                    <el-menu-item index="2" style="float: right;">
                    退出
                    </el-menu-item>
                </a>
            </el-col>
        </el-row>
    </el-menu>
</div>
<div id="middle">
    <div id="left">
        <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
            <el-menu-item-group title="商品管理">
                <a href="/goods/list" class="<%if (originalUrl == '/goods/list'){%>selected<%}%>"><el-menu-item index="11"><i class="el-icon-picture"></i>商品列表</el-menu-item></a>
                <a href="/goods/add" class="<%if (originalUrl == '/goods/add'){%>selected<%}%>"><el-menu-item index="12"><i class="el-icon-document"></i>商品添加</el-menu-item></a>
                <a href="/category/list" class="<%if (originalUrl == '/category/list'){%>selected<%}%>"><el-menu-item index="13"><i class="el-icon-menu"></i>分类管理</el-menu-item></a>
            </el-menu-item-group>
            <el-menu-item-group title="订单管理">
                <a href="/order/list" class="<%if (originalUrl == '/order/list'){%>selected<%}%>"><el-menu-item index="21"><i class="el-icon-message"></i>订单列表</el-menu-item></a>
            </el-menu-item-group>
        </el-menu>
    </div>
    <script type="text/javascript">
    new Vue({
        el: '#top',
        data: {}
    })
    </script>
    <script type="text/javascript">
    new Vue({
        el: '#left',
        data: {}
    })
    </script>
    <div id="main">
        <%- body%>
        <%- style%>
    </div>
</div>
    
    <%- script %>
    <style type="text/css">
        /*手机尺寸*/
        #main,#left {
            margin-top: 10px;
        }

        /*PC尺寸*/
        @media (min-width: 768px) {
            #middle {
                display: flex;
                flex-direction: row;
            }
            #left {
                width: 30%;
            }

            #main {
                margin-left: 10px;
                width: 70%;
            }
        }

        @media (min-width: 992px) {
            #left {
                width: 20%;
            }

            #main {
                width: 80%;
            }
        }

        @media (min-width: 1200px) {
            #left {
                width: 15%;
            }

            #main {
                width: 85%;
            }
        }

        body {
          font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
        }

        /*logo*/
        .logo {
            font-size: 18px;
        }

        /*链接*/
        a {
            text-decoration: none;
        }
        a .el-menu-item{
            color: #48576a;
        }
        a.selected .el-menu-item{
            color: #20a0ff;
        }
        .thumb {
            width: 148px;
            height: 148px;
            display: block;
        }

        /*分页*/
        .el-pagination {
            margin-top: 20px;
        }
    </style>
</body>

</html>